<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="user-left">
				<image class="avatar" :src="detail.avatar"></image>
				<view class="info">
					<text class="nickname">{{ detail.name }}</text>
					<text class="location">
						<text style="color: #0095f8">{{detail.send_type_text}}</text>
						｜ {{ detail.updatetime }}
					</text>
				</view>
			</view>
		</view>
		<!-- 房源描述 -->
		<view class="house-desc">
			<text>{{ detail.desc }}</text>
		</view>

		<!-- 房源图片 -->
		<view class="image-list">
			<image @click.stop="ViewImage(index)" v-for="(img, index) in detail.photos_path" :key="index" :src="img"
				v-if="isImage2(img)" mode="aspectFill" class="house-img"></image>

			<video v-for="(img, index) in detail.photos_path" :src="img" v-if="isImage(img)" controls
				style="width: 100%; height: 240rpx"></video>
		</view>

		<!-- 地址信息 -->
		<view class="address-info">
			<image :src="icon_url[0]" style="width: 32rpx; height: 30rpx"></image>
			<text class="address">{{ detail.address }}</text>
		</view>
		<view class="tips-box">
			<view class="tips-info">
				温馨提示：租房需谨慎，注意核实出租人员身份，仔细阅读租房合同、请勿轻易转账。平台已经对出租信息进行审核但不能保证信息完整无误，若有不实信息可以举报帖子
			</view>
		</view>
		<!-- 浏览信息 -->
		<view class="view-info">
			<view class="views">
				<image :src="icon_url[1]" style="width: 24rpx; height: 22rpx; vertical-align: middle"></image>
				<text>{{ detail.zan_num }}</text>
			</view>
			<view class="shares">
				<image :src="icon_url[2]" style="width: 24rpx; height: 16rpx; vertical-align: middle"></image>
				<text>浏览量 {{ detail.click }}</text>
			</view>
			<view class="time">
				<image :src="icon_url[3]" style="width: 24rpx; height: 22rpx; vertical-align: middle"></image>
				<text>分享 {{ detail.fen_num }}</text>
			</view>
			<view class="shoucang" style="display: flex">
				<u-icon name="star-fill" color="#D1D2D4" size="16"></u-icon>
				<!-- <image :src="icon_url[4]" style="width: 24rpx; height: 22rpx"></image> -->
				<text>收藏 {{ detail.cang_num }}</text>
			</view>
		</view>
		<view class="zan-box" v-if="detail.zan_user.length>0">
			<view class="zan-title">{{detail.zan_user.length}}赞</view>
			<u-avatar-group :urls="formatZanUser(detail.zan_user)" size="24" gap="0.4"></u-avatar-group>
		</view>
		<view class="report-box">
			<view class="report-left">若遇无效,虚假,诈骗信息,请立即举报。</view>
			<view class="report-right" @click.stop="$Tips('/pages/notice/report?pub_id=' + detail.id)">
				<u-icon name="error-circle" color="#2979ff" size="24"></u-icon>
			</view>
		</view>
		<view class="msgList-title">
			<view class="title-left">评论</view>
			<view class="title-right" @click.stop="makeMsg(detail)">立即评论</view>
		</view>
		<view class="msgList-box" v-if="detail.comment_list.length>0">
			<view class="msgList" v-for="(c, v) in detail.comment_list" :key="v">
				<view class="msmall">
					<text style="color: #2979ff" @click.stop="huifu(c, detail)">{{ c.username }}</text>
					<text @click.stop="deleteComment(c)">：{{ c.content }}</text>
				</view>
				<view v-for="(a, b) in c.list">
					<view style="margin-top: 10rpx;display: flex;align-items: center;">
						<view @click.stop="huifu(c, detail)">
							<text style="color: #2979ff">{{ a.username }}</text>
							回复
							<text style="color: #2979ff">{{ c.username }}</text>
						</view>
						<view @click.stop="deleteComment(a)">
							：{{ a.content }}
						</view>
					</view>
					<view v-for="(d, f) in a.list" :key="f">
						<view style="margin-top: 10rpx;display: flex;align-items: center;">
							<view @click.stop="huifu(d, detail)">
								<text style="color: #2979ff">{{ d.username }}</text>回复
								<text style="color: #2979ff">{{ a.username }}</text>
							</view>
							<view @click.stop="deleteComment(d)"> ：{{ d.content }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="bar-content">
				<view class="tab-list">
					<view class="tab-item" @click="toHome">
						<image :src="icon_url[5]" style="width: 30rpx; height: 32rpx"></image>
						<text>首页</text>
					</view>
					<view class="tab-item" @click="toPublish">
						<image :src="icon_url[6]" style="width: 30rpx; height: 30rpx"></image>
						<text>发布</text>
					</view>
					<button class="tab-item share-btn" open-type="share">
						<image :src="icon_url[7]" style="width: 30rpx; height: 30rpx"></image>
						<text>分享</text>
					</button>
					<view class="tab-item" @click="handelcan">
						<u-icon name="star-fill" :color="showCang ? '#0095F8' : '#000000'" size="34rpx"></u-icon>
						<text>收藏</text>
					</view>
				</view>
				<view class="action-btns">
					<view class="btn phone" @click="makePhoneCall">私聊</view>
				</view>
			</view>
			<!-- 添加安全区占位 -->
			<view class="safe-area-inset-bottom"></view>
		</view>
		<u-modal :show="msgshow" :title="msgtitle" confirmText="确认" cancelText="取消" :showCancelButton="true"
			@cancel="msgshow = false" @confirm="sureconfirm">
			<view class="slot-content" style="border: 1px #999 solid;padding: 20rpx;border-radius: 10rpx;width: 96%;">
				<textarea v-model="msgcontent" style="height: 80px;width: 100%;" cols="3" rows="1"
					placeholder="请输入评论"></textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getpublishDetail,
		getcollect,
		addComment,
		delComment,
		sharePage
	} from "@/api/gent.js";
	export default {
		data() {
			return {
				detail: {
					avatar: "",
					nickname: "",
					location: "",
					price: "",
					houseType: "",
					contractType: "",
					description: "",
					phone: "",
					images: [
						this.$Config.HTTP_REQUEST_URL + "/img/module_img2.png",
						this.$Config.HTTP_REQUEST_URL + "/img/module_img2.png",
						this.$Config.HTTP_REQUEST_URL + "/img/module_img2.png",
						this.$Config.HTTP_REQUEST_URL + "/img/module_img2.png",
					],
					address: "",
					views: "",
					shares: "",
					updateTime: "",
				},

				icon_url: [
					this.$Config.HTTP_REQUEST_URL + "/img/location.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon23.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon24.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon25.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon26.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon27.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon28.png",
					this.$Config.HTTP_REQUEST_URL + "/img/icon29.png",
				],
				id: "",
				showCang: false,
				msgshow: false,
				msgcontent: "",
				msgtitle: "随便说点什么",
				newhid: "",
				pjcontent: null
			};
		},
		onLoad(param) {
			this.id = param.id;
			this.getDetail();
		},
		mounted() {
			console.log(this.icon_url);
		},
		methods: {
			deleteComment(item) {
				if (item.can_del == 0) {
					return false
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该评论信息吗？',
					success: (res) => {
						if (res.confirm) {
							delComment({
								comment_id: item.id
							}).then(res => {
								that.$Toast('删除成功');
								that.getDetail();
							});
						}
					}
				});
			},
			makeMsg(val) {
				this.pjcontent = val;
				val.infoShow = false;
				this.msgtitle = "随便说点什么";
				this.msgshow = true;
			},
			sureconfirm() {
				if (this.msgcontent == "") {
					return this.$Toast('请输入内容')
				}
				addComment({
					pub_id: this.pjcontent.id,
					content: this.msgcontent,
					pid: this.newhid,
				}).then(res => {
					this.msgshow = false;
					this.msgcontent = ''
					this.$Toast('提交成功')
					this.getDetail();
				})
			},
			huifu(val, id) {
				this.msgcontent = "";
				this.pjcontent = id;
				this.msgshow = true;
				this.msgtitle = "回复:" + val.username;
				this.newhid = val.id;
			},
			async handelcan() {
				var that = this;
				that.showCang = !that.showCang;
				const res = await getcollect({
					id: this.id,
					type: 1, //1收藏2点赞
					operate_type: that.showCang ? 1 : 2, //  1确认2取消
				});
				if (res.response.statusCode === 200) {
					that.getDetail();
					if (that.showCang) {
						uni.showToast({
							title: "已收藏",
							icon: "none",
							duration: 2000,
						});
					} else {
						uni.showToast({
							title: "已取消",
							icon: "none",
							duration: 2000,
						});
					}
				}
			},
			isImage(url) {
				return /\.(mp4)$/i.test(url);
			},
			isImage2(url) {
				console.log(/\.(mp4|gif)$/i.test(url), 88);
				return /\.(jpg|jpeg|png|gif)$/i.test(url);
			},
			ViewImage(index) {
				let filteredPaths = this.detail.photos_path.filter(
					(path) => !path.endsWith(".mp4")
				);
				uni.previewImage({
					current: filteredPaths[index], //当前点击的图片链接
					urls: filteredPaths, //数组
				});
			},
			async getDetail() {
				const res = await getpublishDetail({
					id: this.id,
				});
				if (res.response.statusCode === 200) {
					this.detail = res.data.data;
					this.showCang = res.data.data.cang == 1 ? true : false;
				}
			},
			formatZanUser(zanUser) {
				return zanUser.map(user => user.avatar);
			},
			makePhoneCall(item) {
				this.$Tips('/pages/message/privateMessageChat?user_id=' + this.detail.user_id + '&name=' + this.detail
					.nickname)
			},
			toHome() {
				uni.switchTab({
					url: "/pages/index/index",
				});
			},
			toPublish() {
				uni.navigateTo({
					url: "/pages/publish/publish-house",
				});
			},
			async getsharePage() {
				const res = await sharePage({
					id: this.id,
				});
			},
		},
		onShareAppMessage(res) {
			var that = this;
			if (res.from === "button") {
				// 来自页面内转发按钮
				this.getsharePage();
			}
			return {
				title: this.detail.desc,
				path: "/pages/notice/notice-detail?id=" + this.id,
				imageUrl: this.detail.first_photos_path,
				success: (res) => {
					// 分享成功的回调函数
					console.log("分享成功1");
				},
				complete: (res) => {
					console.log(res, "分享成功");
				},
			};
		},
	};
</script>

<style lang="less" scoped>
	.share-btn {
		height: 64rpx;
		background: none;
		padding: 0;
		margin: 0;
		line-height: 1;
		border: none;
		outline: none;

		&::after {
			border: none;
		}
	}

	.report-box {
		background: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #666;

		.report-left {
			flex: 1;
			line-height: 1.5;
			margin-right: 20rpx;
		}

		.report-right {
			display: flex;
			align-items: center;
			cursor: pointer;

			u-icon {
				margin-right: 6rpx;

			}
		}
	}

	.msgList-title {
		background: #fff;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #666;

		.title-left {
			font-weight: bold;
		}

		.title-right {
			color: #2979ff;
		}
	}

	.msgList-box {
		background: rgba(0, 149, 248, 0.08);
		padding: 20rpx;
	}

	.zan-box {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 20rpx;

		.zan-title {
			font-size: 26rpx;
			color: #8082A3;
			margin-right: 20rpx;

		}
	}

	.msgList {
		// padding: 20rpx 10rpx;
		// display: flex;
		color: #666;

		.msmall {
			display: flex;
			width: 100%;
			margin-bottom: 20rpx;
		}

		.mgsName {
			color: #2979ff !important;
		}
	}

	.container {
		min-height: 100vh;
		background-color: #f5f6fa;
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		/* iOS 11.2 */
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
		/* iOS 11.2 */
	}

	.user-info {
		background: #fff;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.user-left {
			display: flex;
			align-items: center;

			.info {
				height: 100rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}

			.avatar {
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.nickname {
				font-size: 28rpx;
				color: #333;
				margin-right: 16rpx;
			}

			.location {
				font-size: 24rpx;
				color: #999;
			}
		}

		.post-tag {
			font-size: 24rpx;
			color: #2979ff;
			background: rgba(41, 121, 255, 0.1);
			padding: 4rpx 16rpx;
			border-radius: 4rpx;
		}
	}

	.house-info {
		background: #fff;
		padding: 24rpx;

		.info-item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				font-size: 28rpx;
				color: #666;
				width: 140rpx;
			}

			.price {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}

			.value {
				font-size: 28rpx;
				color: #333;
			}
		}
	}

	.house-desc {
		background: #fff;
		padding: 24rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.image-list {
		background: #fff;
		padding: 24rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 8rpx;

		.house-img {
			width: 100%;
			height: 160rpx;
			border-radius: 8rpx;
		}
	}

	.address-info {
		background: #fff;
		padding: 24rpx;
		display: flex;
		align-items: center;

		.address {
			font-size: 26rpx;
			color: #07c160;
			margin-left: 8rpx;
		}
	}

	.tips-box {
		background: #fff;
		padding: 24rpx;

		.tips-info {
			font-size: 24rpx;
			color: #2979ff;
			background: rgba(0, 149, 248, 0.08);
			line-height: 1.5;
			padding: 12rpx;
			border-radius: 8rpx;
		}
	}

	.view-info {
		background: #fff;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;

		image {
			margin-right: 10rpx;
		}
	}

	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		.bar-content {
			padding: 16rpx 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.safe-area-inset-bottom {
			width: 100%;
			height: constant(safe-area-inset-bottom);
			/* iOS 11.2 */
			height: env(safe-area-inset-bottom);
			/* iOS 11.2 */
			background-color: #fff;
		}

		.tab-list {
			flex: 1;
			display: flex;
			margin-right: 100rpx;
			align-items: center;
			justify-content: space-between;

			.tab-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-size: 22rpx;
					color: #666;
					margin-top: 4rpx;
				}
			}
		}

		.action-btns {
			display: flex;
			align-items: center;

			.btn {
				width: 220rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				border-radius: 44rpx;

				&.message {
					background: #fff;
					color: #2979ff;
					border: 2rpx solid #2979ff;
					margin-right: 16rpx;
				}

				&.phone {
					background: #2979ff;
					color: #fff;
				}
			}
		}
	}
</style>